<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
</head>
<style>
    #app {
        padding: 20px;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    #app ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    #app li {
        padding: 15px;
        background-color: #fff;
        border: 1px solid #dee2e6;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #app h2 {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    #app p {
        margin: 5px 0;
        font-size: 16px;
        color: #666;
    }

    #app p:last-child {
        font-weight: bold;
        color: #007bff;
    }
</style>
<body>
<div id="app">
    <ul>
    <li >
        <h2>百年孤独</h2>
        <p>作者：加西亚·马尔克斯</p>
        <p >已借出\可借阅</p>

    </li>
    </ul>
</div>
<script src="../../js/vue.js"></script>
<script>
    /*
            构建一个图书管理的 Vue 应用，利用 v-for 指令遍历图书列表，并展示图书的名称、作者和借阅状态。

     */
    new Vue({
        el: "#app",
        data: {
            books: [
                { id: 1, title: '百年孤独', author: '加西亚·马尔克斯', isBorrowed: true },
                { id: 2, title: '活着', author: '余华', isBorrowed: false },
                { id: 3, title: '追风筝的人', author: '卡勒德·胡赛尼', isBorrowed: false }
            ]
        }
    });
</script>
</body>
</html>